<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>屏山县科技创新中心信息管理系统-登录</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		  
    <link rel="stylesheet" media="screen" href="sa-resources/login/style.css">
    <link rel="stylesheet" href="static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="static/sa.css">

	<script src="static/kj/vue.min.js"></script>
	<script src="static/kj/axios.min.js"></script>
	<script src="static/kj/element-ui/index.js"></script>
	<script src="static/kj/jquery.min.js"></script>
	<script src="static/kj/layer/layer.js"></script>

    <script src="sa-resources/config.js"></script>

    <style type="text/css">
        /* 背景图片 */
        #particles-js {
            background-image: url(sa-resources/login/bg-2.png);
        }

        /* 样式调整 */
        .login-box {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            width: inherit;
            height: 100%;
        }

        .page-title {
            width: 100%;
            line-height: 1.5em;
            font-size: 3em;
            color: #FFFFFF;
            overflow: hidden;
            text-align: center;
            margin-bottom: 0.5em;
        }

        .wuyan-login {
            height: auto;
            opacity: 0;
        }

        .wuyan-login-box {
            padding: 20px 30px !important;
            border-radius: 30px;
            background-color: rgba(222, 222, 222, 0.4);
        }

        .wuyan-login-box .el-form-item__label {
            color: #FFFFFF;
        }

        .login-button {
            width: 270px;
            background-color: #17968d;
            margin-top: 26px;
        }
    </style>
</head>
<body>
<div id="particles-js" class="vue-box" style="padding: 0">
    <div class="login-box">
        <div style="width: 100%">

            <div class="page-title">
                <span>屏山县科技创新中心信息管理系统</span>
            </div>

            <el-row class="wuyan-login" :gutter="24">
                <el-col class="wuyan-login-box" :span="8" :offset="8" :xs="{span: 22, offset: 1}" :xl="{span: 6, offset: 9}">
                    <el-form :rules="rules" label-position="left" label-width="80px" :model="loginSubject">
                        <el-form-item label="账 户" prop="key">
                            <el-input v-model="loginSubject.key"></el-input>
                        </el-form-item>

                        <el-form-item label="密 码" prop="pwd">
                            <el-input v-model="loginSubject.pwd" type="password"></el-input>
                        </el-form-item>

                        <el-form-item label="验证码" prop="code" v-if="verifyCode">
                            <el-input v-model="loginSubject.code">
                                <template slot="append">
                                    <el-image style="width: 100px; height: 30px;line-height: 30px;"
                                              :src="verifyInfo.code" fit="fill" @click="getVerifyImg">
                                        <div slot="error" class="image-slot"
                                             style="text-align: center;line-height: 30px;">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>

                    <div class="login-button" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;陆</div>
                </el-col>
            </el-row>

        </div>
    </div>
</div>

<script src="static/sa.js"></script>
<script src="sa-resources/api.js"></script>
<script src="sa-resources/wuyan.js"></script>
<script src="sa-resources/element-ui-helper.js"></script>

<script type="text/javascript">
    // 所有参考属性
    var page_title = '屏山县科技创新中心信息管理系统'; // 页面标题
    var logo_url = 'sa-resources/admin-logo.png'; // logo地址，为空字符串则不显示

    var app = new Vue({
        el: '.vue-box',
        data: {
            verifyCode: false,
            verifyInfo: {
                code: '',
                secret: '',
                expires: 300,
            },
            loginSubject: {
                key: '',
                pwd: '',
                code: '',
            },
            // 数据校验规则
            rules: {
                key: [{
                    required: true,
                    message: '请输入登陆账户',
                }],
                pwd: [{
                    required: true,
                    message: '请输入登陆密码',
                }]
            }
        },
        created: function () {
            axiosConfig(axios)
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.initBase()
                this.getVerifyImg()
            },

            /**
             * 基础
             */
            initBase() {
                clearLoginInfo()

                // 替换属性
                $('.page-title').html(page_title);
                if (logo_url != null && logo_url != '') {
                    $('.logo-img').attr('src', logo_url);
                    $('.logo-img').show();
                }

                // 去掉透明
                setTimeout(function () {
                    document.querySelector('.wuyan-login').style.opacity = '1';
                }, 100)

            },

            /**
             * 获取图片验证码
             */
            getVerifyImg() {
                let url = getUrl('auth', 'verifyCodeBase64')
                let http = getHttp(axios, 'auth', 'verifyCodeBase64')
                http(url, {})
                    .then(res => {
                        this.verifyCode = true
                        this.verifyInfo = res
                    })
                    .catch((err) => {
                        this.verifyInfo.code = ''
                        this.verifyInfo.secret = ''
                    });
            },

            /**
             * 登陆
             */
            login() {
                if (baseConfig.debug) {
                    this.loginDemo()
                    return
                }

                let loading = elLoadding({
                    that: this
                })

                let url = getUrl('auth', 'login')
                let http = getHttp(axios, 'auth', 'login')
                http(url, this.loginSubject).then(res => {
                    user = res
                    setLoginInfo(user)
                    sa.msg('登录成功，欢迎你：' + this.loginSubject.key)

                    setTimeout(function () {
                        if (parent == window) {
                            location.href = "index.html";
                        } else {
                            sa.closeCurrIframe();
                            parent.location.reload();
                        }
                    }, 500);

                    loading.close()
                })
                    .catch((err) => {
                        this.getVerifyImg()

                        sa.error(err.msg)

                        loading.close()
                    });
            },

            /**
             * 模拟登陆
             */
            loginDemo() {
                if (simulatedAccount[this.loginSubject.key] && this.loginSubject.pwd == 'test') {
                    let userInfo = simulatedAccount[this.loginSubject.key]
                    user.token = userInfo.token

                    user.info.id = userInfo.account.id
                    user.info.nickname = userInfo.user.nickname
                    user.info.img = userInfo.user.img
                    user.menu = []

                    let roleInfo = []
                    userInfo.roles.forEach(t => {
                        roleInfo.push(simulatedRole[t])
                    })

                    roleInfo.forEach(t => {
                        if (t.menu == 'all') {
                            user.menu = 'all'
                        } else {
                            user.menu = user.menu.concat(t.menu)
                        }
                    })

                    setLoginInfo(user)

                    sa.msg('登录成功，欢迎你：' + this.loginSubject.key);
                    setTimeout(function () {
                        if (parent == window) {
                            location.href = "index.html";
                        } else {
                            sa.closeCurrIframe();
                            parent.location.reload();
                        }
                    }, 500);
                } else {
                    sa.error('登录失败，用户名或密码错误');
                }
            }
        }
    })
</script>

<script type="text/javascript">
    console.log('本页面参考于jq22，原作者：http://www.jq22.com/jquery-info20074');
</script>
</body>
</html>
